<template>
  <TabBar>

    <TabBarItem path="/home" activatecolor="blue">
      <img slot="item-img" src="../assets/img/home.svg">
      <img slot="item-activate-img" src="../assets/img/home_active.svg">
      <div slot="item-text">首页</div>
    </TabBarItem>


    <TabBarItem path="/category" activatecolor="blue">
      <img slot="item-img" src="../assets/img/category.svg">
      <img slot="item-activate-img" src="../assets/img/category_active.svg">
      <div slot="item-text">分类</div>
    </TabBarItem >

    <TabBarItem path="/shopcart" activatecolor="blue">
      <img slot="item-img" src="../assets/img/shopcart.svg">
      <img slot="item-activate-img" src="../assets/img/shopcart_active.svg">
      <div slot="item-text">购物车</div>
    </TabBarItem>

    <TabBarItem path="/profile" activatecolor="blue">
      <img slot="item-img" src="../assets/img/profile.svg">
      <img slot="item-activate-img" src="../assets/img/profile_active.svg">
      <div slot="item-text">我的</div>
    </TabBarItem>

  </TabBar>
</template>

<script>
import TabBar from "./tabbar/TabBar";
import TabBarItem from "./tabbar/TabBarItem";
export default {
  name: "MainTabBar",
  components:{
    TabBarItem,
    TabBar
  }
}
</script>

<style scoped>

</style>
